<template>
	<view>
		<view
			style="display:flex;flex-direction:column;justify-content:space-between;min-height:100vh;padding:2vh 0 1vh 0;box-sizing:border-box;">
			<view class="box">
				<view v-for="(item, index) in list">
					<view>{{ item.title }}</view>
					<view>
						<view>
							<view class="player" v-for="(key, i) in item.pusher">
								<view @click="playerPusher(key, i, index)" v-show="!item.pusherStatus[i]">
									<image
										src="https://new.kuxia.top/uploads/image/20220930/f8c5ebc149a1198cb2aa3c7650b391ea.png" />
									<view>播放录音</view>
								</view>
								<view @click="stopPlayerPusher(key, i, index)" v-show="item.pusherStatus[i]">
									<image
										src="https://new.kuxia.top/uploads/image/20220930/3fdaef218f2875841df6c5f8abfb1a20.png" />
									<view>播放录音</view>
								</view>
								<view @click="pusherSplice(index, i)">
									<image
										src="https://new.kuxia.top/uploads/image/20220930/af303219a2bf99653d7df2e4381dd419.png" />
									<view>删除</view>
								</view>
							</view>
							<view class="pusher">
								<view @click="clickPusher(index, i)">
									<image
										src="https://new.kuxia.top/uploads/image/20220930/366314147d55df7ec1ddaaba9be657d5.png" />
									<view>录制录音</view>
								</view>
							</view>
						</view>
						<view>
							<view class="fileList" v-for="(key, i) in item.image">
								<view>
									<image :src="key" />
									<view @click="imageSplice(index, i)"></view>
								</view>
							</view>
							<view class="fileBtn" @click="clickImage(index, i)">上传图片{{ item.image.length }}/3</view>
						</view>
					</view>
				</view>
				<view>
					<view style="margin:1vh 0;">本次症状文字描述(最多50字)：</view>
					<textarea style="width:100%;border:1px #e8e6e6 solid;padding:1vh 2.5vw;height:12vh"
						placeholder="请输入描述" v-model="text"></textarea>
				</view>
			</view>
			<view class="btn" @click="btn">立即预约</view>
		</view>
		<u-popup :show="popup" @close="popupClose">
			<view class="popup">
				<view>{{ duration }}</view>
				<view>最短5秒钟，最长10分钟</view>
				<view :style="playerStatus ? 'justify-content:space-between' : 'justify-content:center'">
					<image src="https://new.kuxia.top/uploads/image/20220930/f8c5ebc149a1198cb2aa3c7650b391ea.png"
						v-show="playerStatus && !playerStart" @click="playerClick" class="player" />
					<image src="https://new.kuxia.top/uploads/image/20220930/3fdaef218f2875841df6c5f8abfb1a20.png"
						v-show="playerStatus && playerStart" @click="playerBreak" class="player" />
					<image src="https://new.kuxia.top/uploads/image/20220930/ac1070a6ce423293e340051b040e14b6.png"
						@click="startPusher" v-show="!pusherStatus" class="pusherBtn" />
					<view @click="endPusher" v-show="pusherStatus"></view>
					<image src="https://new.kuxia.top/uploads/image/20220930/c8fb81bc3388b9a4c8fc3420cc328de0.png"
						v-show="playerStatus" class="player" @click="addPusher" />
				</view>
				<view>录制完毕</view>
			</view>
		</u-popup>

		<u-toast ref="uToast"></u-toast>


	</view>
</template>

<script>
import {
	reservatio
} from '../../request/index.js'
import baseUrl from '../../request/baseUrl.js'
const pusher = uni.getRecorderManager();
let timer = null,
	sconds = 0,
	minute = 0;
const innerAudioContext = uni.createInnerAudioContext();
export default {
	data() {
		return {
			data: '',
			popup: false,
			popupIndex: null,
			popupI: null,
			pusherStatus: false,
			duration: '00:00',
			playerStatus: false,
			pusherStorage: '',
			playerStart: false,
			list: [{
				title: `第一次出现症状描述及用药史`,
				pusherToast: `请录制首次症状描述`,
				imageToast: `请上传首次出现症状相关图片`,
				pusher: [],
				image: [],
				pusherStatus: [],
			},
			{
				title: `最近一次症状描述及症状史`,
				pusherToast: `请录制最近一次症状描述`,
				imageToast: `请上传最近一次症状相关图片`,
				pusher: [],
				image: [],
				pusherStatus: [],
			},
			{
				title: `当前的症状描述`,
				pusherToast: `请录制当前症状描述`,
				imageToast: `请上传当前症状相关图片`,
				pusher: [],
				image: [],
				pusherStatus: [],
			}
			],

			first: [],
			first_img: [],
			lately: [],
			lately_img: [],
			today: [],
			today_img: [],
			text: '',

		}
	},
	onShow() {

	},
	onLoad({
		data
	}) {
		console.log(JSON.parse(data));
		this.data = JSON.parse(data);


		pusher.onStart(() => {
			this.pusherStatus = true;
			timer = setInterval(() => {
				sconds++;
				if (sconds === 60) {
					minute++;
					sconds = 0;
				}

				if (String(minute).length === 1) {
					if (String(sconds).length === 1) {
						this.duration = `0${minute}:0${sconds}`
					} else {
						this.duration = `0${minute}:${sconds}`
					}
				} else {
					this.duration = `${minute}:0${sconds}`
					clearInterval(timer);
					this.$refs.uToast.show({
						message: '录制完毕',
						duration: 1000,
					})
					this.pusherStatus = false;
				}

			}, 1000);
		})

		pusher.onStop(({
			tempFilePath,
			duration
		}) => {
			clearInterval(timer)
			this.pusherStatus = false;
			if (duration >= 5000) {
				this.$refs.uToast.show({
					message: '录制完毕',
					duration: 1000,
				})
				console.log(tempFilePath, duration);
				this.pusherStorage = tempFilePath;
				this.playerStatus = true;
			} else {
				this.$refs.uToast.show({
					message: '不能小于5秒，请重新录制',
					duration: 1000,
				})
				this.duration = '00:00';
				sconds = 0,
					minute = 0;
			}
		});
		innerAudioContext.onPlay(() => {
			this.playerStart = true;
			console.log(333);
		})
		innerAudioContext.onStop(() => {
			this.playerStart = false;
		})
		innerAudioContext.onEnded(() => {
			console.log(`播放完毕`);
			this.playerStart = false;
			this.list.forEach(v => {
				v.pusherStatus = v.pusherStatus.map(item => false)
			})
			console.log(this.list);
		})
	},
	methods: {
		pusherSplice(index, i) {
			this.list[index].pusher.splice(i, 1);
		},
		popupClose() {
			this.popup = false;
			this.playerStatus = false;
			this.pusherStatus = false;
			this.popupIndex = null;
			this.popupI = null;
			timer = null,
				sconds = 0,
				minute = 0;
			this.duration = '00:00';
			this.pusherStorage = '';
			this.playerStart = false;
			pusher.stop()
		},
		btn() {
			let valid = true;
			for (let i = 0; i < this.list.length; i++) {
				if (!this.list[i].pusher.length) {
					this.$refs.uToast.show({
						message: this.list[i].pusherToast,
						duration: 1000,
					})
					valid = false;
					break;
				}
				if (!this.list[i].image.length) {
					this.$refs.uToast.show({
						message: this.list[i].imageToast,
						duration: 1000,
					})
					valid = false;
					break;
				}
			}
			if (!this.text.length) {
				valid = false
				this.$refs.uToast.show({
					message: '请输入本次症状描述',
					duration: 1000,
				})
			}
			if (!valid) return




			this.first = this.list[0].pusher.join();
			this.lately = this.list[1].pusher.join();
			this.today = this.list[2].pusher.join();
			this.first_img = this.list[0].image.map(item => {
				item = item.split(baseUrl)[1];
				return item
			}).join();
			this.lately_img = this.list[1].image.map(item => {
				item = item.split(baseUrl)[1];
				return item
			}).join();
			this.today_img = this.list[2].image.map(item => {
				item = item.split(baseUrl)[1];
				return item
			}).join();
			console.log({
				...this.data,
				patientid: uni.getStorageSync('userid'),
				first: this.first,
				first_img: this.first_img,
				lately: this.lately,
				lately_img: this.lately_img,
				today: this.today,
				today_img: this.today_img,
				txt: this.text,
			});
			// return
			reservatio({
				...this.data,
				patientid: uni.getStorageSync('userid'),
				first: this.first,
				first_img: this.first_img,
				lately: this.lately,
				lately_img: this.lately_img,
				today: this.today,
				today_img: this.today_img,
				txt: this.text
			}).then(res => {
				console.log(res);
				if (res.data.status) {
					uni.switchTab({
						url: '/pages/index/index',
						success(res) {
							uni.showToast({
								title: '预约成功'
							})
						}
					})
				} else {
					this.$refs.uToast.show({
						message: '预约失败，请重试',
						duration: 1000,
					})
				}
			})
		},
		clickImage(index, i) {
			const that = this;
			if (that.list[index].image.length < 3) {
				uni.chooseImage({
					count: 3,
					success({
						tempFilePaths
					}) {
						console.log(tempFilePaths);
						tempFilePaths.forEach(item => {
							uni.uploadFile({
								url: baseUrl + '/api/hospital/upload',
								filePath: item,
								name: 'file',
								success({
									data
								}) {
									that.list[index].image.push(baseUrl + JSON.parse(data)
										.url);
								},
							})
						})
						// that.list[index].image.push(...tempFilePaths)

						console.log(that.list[index].image);
					}
				})
			}
		},
		clickPusher(index, i) {
			this.popup = true;
			this.popupIndex = index;
			this.popupI = i;
		},
		imageSplice(index, i) {
			this.list[index].image.splice(i, 1)
			this.list[index].pusherStatus.splice(i, 1)
		},
		startPusher() {
			pusher.start({
				duration: 600000,
				format: 'mp3',
			})
		},
		endPusher() {
			pusher.stop()
			this.playerStart = false;

		},
		playerClick() {
			console.log(this.pusherStorage);
			innerAudioContext.src = this.pusherStorage;
			innerAudioContext.play();
		},
		playerBreak() {
			innerAudioContext.stop();
		},
		stopPlayerPusher(src, i, index) {
			innerAudioContext.stop();
			this.list[index].pusherStatus[i] = false;
		},
		addPusher() {
			console.log(this.list[this.popupIndex].pusher);
			console.log(this.pusherStorage);

			uni.showLoading({
				title: "上传中...",
			});
			const that = this;

			uni.uploadFile({
				name: "file",
				url: baseUrl + '/api/hospital/audio',
				filePath: that.pusherStorage,
				fileType: "audio",
				success(uploadFileRes) {
					uni.hideLoading();
					console.log(uploadFileRes);
					const ret = JSON.parse(uploadFileRes.data);
					console.log(ret);
					that.list[that.popupIndex].pusher.push(baseUrl + ret.url)
					that.list[that.popupIndex].pusherStatus.push(false);
					that.popup = false;
					that.popupClose();
				}
			});




		},
		playerPusher(src, i, index) {
			this.list.forEach(v => {
				v.pusherStatus = v.pusherStatus.map(item => false)
			})
			innerAudioContext.src = src;
			innerAudioContext.play();
			console.log(i, index);
			this.list[index].pusherStatus[i] = true;
		},
	}
}	
</script>

<style lang="scss">
page {
	background: #efefef;
	padding: 0 3.5%;
	box-sizing: border-box;
}

.popup {
	width: 100%;
	height: 35vh;
	box-sizing: border-box;
	padding: 3vh 17.5vw 1.5vh 17.5vw;

	>view {
		margin: 1.5vh 0;

		&:nth-child(1) {
			font-size: 20px;
			text-align: center;
		}

		&:nth-child(2) {
			color: #999999;
			font-size: 15px;
			text-align: center;
		}

		&:nth-child(3) {
			display: flex;
			justify-content: space-between;
			align-items: center;

			>view {
				width: 22vw;
				height: 22vw;
				border-radius: 50%;
				box-sizing: border-box;
				border: 1px #3c8bff solid;
				position: relative;
				transition: .4s;

				&::after {
					content: '';
					background: #d81e06;
					height: 6.5vw;
					width: 6.5vw;
					border-radius: 50%;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}
			}

			>image {

				&.player {
					width: 10vw;
					height: 10vw;
				}

				&.pusherBtn {
					width: 22vw;
					height: 22vw;
					transition: .4s;
				}


			}
		}

		&:nth-child(4) {
			color: #666666;
			font-size: 17px;
			text-align: center;
		}
	}
}

.box {
	width: 100%;
	background: white;
	padding: 2vh 3vw;
	box-sizing: border-box;

	>view {

		>view:first-child {
			font-size: 15px;
		}

		>view:last-child {
			display: flex;
			width: 100%;
			padding: 1vh 0;

			>view:first-child {
				flex: 1;
				display: flex;
				flex-direction: column;

				>.player {
					display: flex;
					justify-content: space-around;
					padding-right: 3vw;
					margin: 1vh 0;

					>view {

						>image {
							width: 5vw;
							height: 5vw;
							margin: 0 auto .5vh auto;
							display: block;
						}

						>view {
							font-size: 15px;
						}
					}
				}

				>.pusher {
					margin: 0 auto;

					>view {

						>image {
							width: 5vw;
							height: 5vw;
							display: block;
							margin: 0 auto .5vh auto;
						}

						>view {
							font-size: 15px;
						}
					}
				}
			}

			>view:last-child {
				flex: .5;

				>.fileList {
					>view {
						width: 15vw;
						height: 15vw;
						position: relative;
						margin: 1vh auto;

						>view {
							position: absolute;
							right: 5%;
							top: 5%;
							background: black;
							width: 30%;
							height: 30%;
							border-radius: 50%;
							display: grid;
							place-content: center;

							&::after {
								content: '\2716';
								color: white;
								font-size: 9px;
							}
						}

						>image {
							width: 100%;
							height: 100%;
						}
					}
				}

				>.fileBtn {
					background: #007aff;
					color: white;
					padding: .5vh 2vw;
					border-radius: 5px;
					display: flex;
					place-content: center;
					font-size: 15px;
				}
			}
		}
	}
}

.btn {
	width: 80%;
	height: 6.5vh;
	background: #44cf7c;
	color: white;
	// position: fixed;
	// bottom: 1vh;
	// left: 50%;
	font-size: 20px;
	display: grid;
	place-content: center;
	margin: 4vh auto 1vh auto;
	// transform: translateX(-50%);
	border-radius: 25px;
}
</style>
